<script>
import { onMounted, reactive, toRefs } from "vue";
import { getCompetition } from "../assets/api/match.js";
import { useRouter } from "vue-router";
import { Toast } from "vant";

export default {
  setup() {
    let router = useRouter();
    const match = reactive({
      tabs: [
        {
          id: -1,
          name: "全部",
        },
        {
          id: 0,
          name: "进行中",
        },
        {
          id: 1,
          name: "赛程",
        },
        {
          id: 2,
          name: "赛果",
        },
        {
          id: 3,
          name: "收藏",
        },
      ],
      tabid: -1,
      Competition: [],
      //全部数据
      date: null,
      collectnum: 0,
      collectlist: [],
      editId: 1,
      num: false,
      // 加载
      load: true,
      make: [],
    });
    onMounted(() => {
        match.editId = window.localStorage.getItem("editId")

      if (!window.localStorage.getItem("make")) {
        window.localStorage.setItem("make", JSON.stringify([]));
      } else {
        match.make = JSON.parse(localStorage.getItem("make"));
      }
      if (!window.localStorage.getItem("makeArr")) {
        window.localStorage.setItem("make", JSON.stringify([]));
      } else {
        match.collectlist = JSON.parse(localStorage.getItem("makeArr"));
        match.collectnum = match.collectlist.length;
        if (match.collectlist.length == 0) {
          match.num = false;
        } else {
          match.num = true;
        }
      }
      getCompetition(match.tabid)
        .then((data) => {
          match.Competition = data.data[0].matchDtoList;
          match.date = data.data[0].date;
          match.load = false;
        })
        .then(() => {
          match.Competition.map((item) => {
            match.make.map((item1) => {
              if (item.matchId == item1.matchId) {
                item.wordLive = true;
              }
            });
          });
        });
      // 判断是否已经被预约
    });
    // 比赛详情跳转
    const goMatch = (item) => {
      router.push({
        path: "/detailsmatch",
        query: {
          id: item.matchId,
        },
      });
    };
    const getId = (id) => {
      match.load = true;
      match.Competition = []
      match.tabid = id;
      getCompetition(match.tabid)
        .then((data) => {
          match.Competition = data.data[0].matchDtoList;
          match.date = data.data[0].date;
          match.load = false;

          console.log(data);
        })
        .then(() => {
          match.Competition.map((item) => {
            match.make.map((item1) => {
              if (item.matchId == item1.matchId) {
                item.wordLive = true;
              }
            });
          });
        });
    };
    const collect = (item) => {
      if (!window.localStorage.getItem("token")) {
        Toast("未登录，前往登录页面");
        router.push("/my");
      } else {
        let id = item.matchId;

        match.make.push({
          matchId: id,
        });

        item.wordLive = true;
        match.collectlist.push(item);
        match.collectnum = match.collectlist.length;
        match.num = true;

        window.localStorage.setItem(
          "makeArr",
          JSON.stringify(match.collectlist)
        );
        window.localStorage.setItem("make", JSON.stringify(match.make));
      }
    };
    const collects = (item) => {
      let id = item.matchId;
      item.wordLive = null;
      match.make = match.make.filter((item) => {
        return item.matchId != id;
      });
      match.collectlist = match.collectlist.filter((item) => {
        return item.matchId != id;
      });
      match.collectnum = match.collectlist.length;
      if (match.collectlist.length == 0) {
        match.num = false;
      } else {
        match.num = true;
      }
      window.localStorage.setItem("make", JSON.stringify(match.make));
      window.localStorage.setItem("makeArr", JSON.stringify(match.collectlist));
    };
    return {
      ...toRefs(match),
      goMatch,
      getId,
      collect,
      collects,
    };
  },
};
</script>

<template>
  <div class="container event">
    <van-sticky>
      <top-coms v-if="editId == 2"></top-coms>
      <top-com v-if="editId == 1"></top-com>
      <van-loading v-if="load" size="30">加载中...</van-loading>
      <!-- tabs -->
      <div class="tabs">
        <van-tabs :class="['tab_nav', { tabs_nav: editId == 2 }]">
          <van-tab title="足球">
            <div class="tabss">
              <ul>
                <li v-for="item in tabs" :key="item.id" @click="getId(item.id)">
                  <span :class="{ active: tabid == item.id }">{{
                    item.name
                  }}</span>
                </li>
              </ul>
              <div v-show="num == true" class="collectnum">
                {{ collectnum }}
              </div>
            </div>
          </van-tab>
          <van-tab title="篮球">
            <div class="tabss">
              <ul>
                <li v-for="item in tabs" :key="item.id" @click="getId(item.id)">
                  <span>{{ item.name }}</span>
                </li>
              </ul>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-sticky>

    <div class="content">
      <!-- 全部 -->
      <div class="one" v-show="tabid == -1">
        <div class="transition">{{ date }}</div>
        <div
          class="competition"
          v-for="item in Competition"
          :key="item.matchId"
          @click="goMatch(item)"
        >
          <div class="title">
            <div class="left">
              <div class="name">{{ item.tournamentName }}</div>
              <div class="time">{{ item.actualMatchTime }}</div>
            </div>
            <div class="nowtime" :style="{ color: item.scoreColor }">
              {{ item.currentStatus }}
            </div>
          </div>
          <div>
            <div class="content">
              <div>
                <i
                  @click.stop="collect(item)"
                  v-show="item.wordLive == null"
                  class="iconfont icon-shoucang"
                ></i>
                <i
                  @click.stop="collects(item)"
                  class="iconfont icon-shoucang1"
                  v-show="item.wordLive == true"
                  style="color: red"
                ></i>
              </div>
              <span class="name1">{{ item.homeTeamShowName }}</span>
              <div class="com">
                <span class="num" :style="{ color: item.scoreColor }">{{
                  item.score
                }}</span
                ><span class="name2">{{ item.awayTeamShowName }}</span>
              </div>
              <div class="img">
                <img :src="item.userIcon" alt="" />
              </div>
            </div>
            <div class="bottom">{{ item.halfTimeScore }}</div>
          </div>
        </div>
      </div>

      <!-- 进行中 -->
      <div class="one ongoing" v-show="tabid == 0">
        <div class="transition">{{ date }}</div>
        <div
          class="competition"
          v-for="item in Competition"
          :key="item.matchId"
          @click="goMatch(item)"
        >
          <div class="title">
            <div class="left">
              <div class="name">{{ item.tournamentName }}</div>
              <div class="time">{{ item.actualMatchTime }}</div>
            </div>
            <div class="nowtime" :style="{ color: item.scoreColor }">
              {{ item.currentStatus }}
            </div>
          </div>
          <div>
            <div class="content">
              <div>
                <i
                  @click.stop="collect(item)"
                  v-show="item.wordLive == null"
                  class="iconfont icon-shoucang"
                ></i>
                <i
                  @click.stop="collects(item)"
                  class="iconfont icon-shoucang1"
                  v-show="item.wordLive"
                  style="color: red"
                ></i>
              </div>
              <span class="name1">{{ item.homeTeamShowName }}</span>
              <div class="com">
                <span class="num" :style="{ color: item.scoreColor }">{{
                  item.score
                }}</span
                ><span class="name2">{{ item.awayTeamShowName }}</span>
              </div>
              <div class="img">
                <img :src="item.userIcon" alt="" />
              </div>
            </div>
            <div class="bottom">{{ item.halfTimeScore }}</div>
          </div>
        </div>
      </div>

      <!-- 赛程 -->
      <div class="one schedule" v-show="tabid == 1">
        <div class="transition">{{ date }}</div>
        <div
          class="competition"
          v-for="item in Competition"
          :key="item.matchId"
          @click="goMatch(item)"
        >
          <div class="title">
            <div class="left">
              <div class="name">{{ item.tournamentName }}</div>
              <div class="time">{{ item.actualMatchTime }}</div>
            </div>
            <div class="nowtime" :style="{ color: item.scoreColor }">
              {{ item.currentStatus }}
            </div>
          </div>
          <div>
            <div class="content">
              <div>
                <i
                  @click.stop="collect(item)"
                  v-show="item.wordLive == null"
                  class="iconfont icon-shoucang"
                ></i>
                <i
                  @click.stop="collects(item)"
                  class="iconfont icon-shoucang1"
                  v-show="item.wordLive"
                  style="color: red"
                ></i>
              </div>
              <span class="name1">{{ item.homeTeamShowName }}</span>
              <div class="com">
                <span class="num" :style="{ color: item.scoreColor }">{{
                  item.score
                }}</span
                ><span class="name2">{{ item.awayTeamShowName }}</span>
              </div>
              <div class="img">
                <img :src="item.userIcon" alt="" />
              </div>
            </div>
            <div class="bottom">{{ item.halfTimeScore }}</div>
          </div>
        </div>
      </div>

      <!-- 赛果 -->
      <div class="one result" v-show="tabid == 2">
        <div class="transition">{{ date }}</div>
        <div
          class="competition"
          v-for="item in Competition"
          :key="item.matchId"
          @click="goMatch(item)"
        >
          <div class="title">
            <div class="left">
              <div class="name">{{ item.tournamentName }}</div>
              <div class="time">{{ item.actualMatchTime }}</div>
            </div>
            <div class="nowtime" :style="{ color: item.scoreColor }">
              {{ item.currentStatus }}
            </div>
          </div>
          <div>
            <div class="content">
              <div>
                <i
                  @click.stop="collect(item)"
                  v-show="item.wordLive == null"
                  class="iconfont icon-shoucang"
                ></i>
                <i
                  @click.stop="collects(item)"
                  class="iconfont icon-shoucang1"
                  v-show="item.wordLive"
                  style="color: red"
                ></i>
              </div>
              <span class="name1">{{ item.homeTeamShowName }}</span>
              <div class="com">
                <span class="num" :style="{ color: item.scoreColor }">{{
                  item.score
                }}</span
                ><span class="name2">{{ item.awayTeamShowName }}</span>
              </div>
              <div class="img">
                <img :src="item.userIcon" alt="" />
              </div>
            </div>
            <div class="bottom">{{ item.halfTimeScore }}</div>
          </div>
        </div>
      </div>

      <!-- 收藏 -->
      <div class="one collect" v-show="tabid == 3">
        <div class="transition">2022-11-30 星期三 ({{ collectnum }}场)</div>
        <div
          class="competition"
          v-for="item in collectlist"
          :key="item.matchId"
          @click="goMatch(item)"
        >
          <div class="title">
            <div class="left">
              <div class="name">{{ item.tournamentName }}</div>
              <div class="time">{{ item.actualMatchTime }}</div>
            </div>
            <div class="nowtime" :style="{ color: item.scoreColor }">
              {{ item.currentStatus }}
            </div>
          </div>
          <div class="content">
            <div>
              <i
                @click.stop="collect(item)"
                v-show="item.wordLive == null"
                class="iconfont icon-shoucang"
              ></i>
              <i
                @click.stop="collects(item)"
                class="iconfont icon-shoucang1"
                v-show="item.wordLive"
                style="color: red"
              ></i>
            </div>
            <span class="name1">{{ item.homeTeamShowName }}</span>
            <div class="com">
              <span class="num" :style="{ color: item.scoreColor }">{{
                item.score
              }}</span
              ><span class="name2">{{ item.awayTeamShowName }}</span>
            </div>
            <div class="img">
              <img :src="item.userIcon" alt="" />
            </div>
          </div>
          <div class="bottom">{{ item.halfTimeScore }}</div>
        </div>
      </div>
    </div>

    <bottom-com :tabId="(tabId = 3)" v-if="editId == 1"></bottom-com>
    <bottom-coms :tabId="(tabId = 3)" v-if="editId == 2"></bottom-coms>
  </div>
</template>

<style lang="scss" scoped>
.tab_nav ::v-deep .van-tabs__nav {
  background-color: #fff;
  // border-bottom: 1px solid #ededef;
  .van-tab__text {
    color: #3f3f3f;
    font-size: 20px;
  }
  .van-tabs__line {
    background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
    height: 3px;
    border-radius: 2px;
  }
  .van-tab--active {
    font-weight: bold;
  }
}
.tabs_nav ::v-deep .van-tabs__nav {
  .van-tabs__line {
    background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
  }
}
.event {
  padding-bottom: 75px;
  // background-color: #f6f7f8;
  .tabss {
    background-color: #fff;
    border-top: 1px solid #ededef;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    margin-bottom: 34px;
    justify-content: space-around;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      height: 37px;
      padding-top: 4px;
      line-height: 38px;
      white-space: nowrap;
      display: flex;
      position: relative;
      margin-bottom: 6px;

      li {
        position: relative;
        span {
          color: #787a82;
          font-weight: 700;
          font-size: 14px;
          margin: 0 20px;
          &.active {
            // font-weight: 700;
            color: #3f3f3f;
          }
        }

        // &::before {
        //   content: "";
        //   position: absolute;
        //   top: auto;
        //   left: 18%;
        //   bottom: -6px;
        //   right: auto;
        //   height: 3px;
        //   width: 60%;
        //   background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
        //   border-radius: 2px;
        // }
      }
    }
    .collectnum {
      position: absolute;
      top: 53px;
      right: 22px;
      font-size: 12px;
      transform: scale(0.73, 0.73);
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      background: red;
      color: #fff;
      border-radius: 50%;
    }
  }
  .content {
    .transition {
      width: 100%;
      padding-left: 15px;
      color: #787a82;
      font-size: 12px;
      height: 34px;
      line-height: 34px;
      background-color: #f4f4f4;
      position: fixed;
      top: 137px;
      z-index: 100;
    }
    .competition {
      margin-bottom: 10px;
      background-color: #fff;
      padding-bottom: 10px;
      // &:first-of-type{
      //   margin-top: 34px;
      // }
      .title {
        padding: 0 10px;
        height: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f4f4f4;
        .left {
          width: 44%;
          display: flex;
          align-items: center;
          .name {
            color: rgb(51, 102, 204);
            font-size: 13px;
            transform: scale(0.83, 0.83);
            font-weight: 600;
            font-family: 黑体;
          }
          .time {
            margin: 3px 0 0 4px;
            font-size: 12px;
            color: #a3a2aa;
          }
        }
        .nowtime {
          color: rgb(248, 73, 18);
          font-size: 12px;
          transform: scale(0.83, 0.83);
          flex: 1;
          // padding-left: 25%;
          font-weight: bold;
        }
        .gray {
          color: #a3a2aa;
        }
      }
      .content {
        margin-top: 12px;
        align-items: center;
        padding: 0px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .iconfont {
          color: #e3e2e9;
          font-size: 20px;
        }
        .img {
          width: 24px;
          height: 24px;
          img {
            width: 100%;
            border-radius: 50%;
          }
        }
        .name1 {
          width: 35%;
          color: #333333;
          font-weight: 600;
          font-family: 黑体;
          font-size: 14px;
          margin: 0px 10px;
          display: flex;
          justify-content: flex-end;
        }
        .results {
          width: 40%;
        }
        .com {
          flex: 1;
          display: flex;
          align-items: center;
          .name2 {
            color: #333333;
            font-weight: 600;
            font-family: 黑体;
            font-size: 14px;
            margin: 0px 10px;
          }
          .num {
            color: rgb(12, 173, 15);
            font-size: 15px;
            font-weight: bold;
          }
          .grags {
            color: #a3a2aa;
            padding-left: 3px;
            padding-right: 3px;
          }
        }
      }
      .bottom {
        color: #909090;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
        padding-bottom: 2px;
      }
    }
  }
}
::v-deep .van-share-sheet__options {
  justify-content: space-around;
  padding: 16px 0;
}
::v-deep .van-loading {
  position: fixed;
  top: 100px;
  z-index: 100;
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
}
</style>
